  // 按需导入 mapGetters 这个辅助方法
  import { mapGetters } from 'vuex'
  // home.vue，cate.vue，cart.vue，my.vue 这 4 个 tabBar 页面都需要添加购物车tabBar 徽标；所以从cart.vue中抽离到混入.js中方便全局使用
  
// 导出一个 mixin 对象
export default{
  computed:{
     // 将 m_cart 模块中的 total 映射为当前页面的计算属性
     ...mapGetters('m_cart', ['total']),
  },
  onShow(){
    // 在页面刚显示出来的时候，立即调用 setBadge 方法，为 tabBar 设置数字徽标
    this.setBadge()
  },
  
  methods:{
     setBadge() {
       // 调用 uni.setTabBarBadge() 方法，为购物车设置右上角的徽标
       uni.setTabBarBadge({
         // 购物车的tab栏是第三个；索引为2
           index: 2, // 索引
           text: this.total + '' // 注意：text 的值必须是字符串，不能是数字
       })   
     }
  
  },
  watch:{
    // 在页面首次加载后;后续不会被调用问题(setBadge()在getter更新触发setBadge方法)
    total:{
       // 监听 total 值的变化
      handler(newVal){
          // 调用 methods 中的 setBadge 方法，重新为 tabBar 的数字徽章赋值
        this.setBadge()
      },
      immedite:true
    }
  }
  
}